/* @import 'proto-ui.vusion/src/u-input.vue/module.css'; */
/* 暂时没办法import其他文件 */
.root {
    display: inline-block;
    position: relative;
    max-width: 100%; /* 防止表格等小的地方超出区域 */
    width: $width-base;
    height: $height-base;
    background: white;
    border-radius: 0;
    line-height: calc($height-base - 2px);
}

.input {
    margin: 0;
    padding: 0 8px;
    border: 1px solid $border-color-base;
    width: 100%;
    height: 100%;
    background: inherit;
    font: inherit;
    color: inherit;
    border-radius: inherit;
    line-height: inherit;
}

.input:focus {
    outline: $focus-outline;
    border-color: $brand-primary;
}

.root[color="error"] {
    border-color: $brand-error;
}

.input[disabled] {
    cursor: $cursor-not-allowed;
    background: $gray-lighter;
}

.root{
    position: relative;
}

.input {
    padding: 0 10px;
    color: #666;
    border-color: $brand-secondary;
    border-radius: 3px;
    transition: border-color $transition-duration;
}
.input[close]{
    padding-right: 30px;
}

.input::placeholder {
    /* Removes placeholder transparency in Firefox. */
    opacity: 1;
    color: #999;
}


.input[color="error"] {
    border-color: $brand-error;
}
.input[disabled] {
    background-color: $brand-disabled;
    border-color: $brand-disabled;
}

.close{
    position: absolute;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    right: 1px;
    top: 0;
    cursor: pointer;
}

/* todo */
/* .closeIcon{
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #f5f7fa;
    border-radius: 100%;
    display: inline-block;
}

.closeIcon:before{
    icon-font: url(../u-icon.vue/icons/close-small.svg);
    font-size: 16px;
    color:#b4b4b4;
    margin-right: 0;
    vertical-align: middle;
} */

.root[size$="mini"] { width: 80px; }
.root[size^="mini"] { height: 28px; }
.input[size$="mini"]{ padding: 0 6px; }
.input[size$="mini"][close] { padding-right: 30px; }

.root[size$="small"] { width: 120px; }
.root[size^="small"] { height: 30px; }
.input[size$="small"] { padding: 0 8px; }
.input[size$="small"][close] { padding-right: 30px; }

.root[size$="normal"] { width: 160px; }
.root[size^="normal"] { height: $height-base; }
.input[size$="normal"] { padding: 0 10px; }
.root[size$="normal"][close] { padding-right: 30px; }

.root[size$="medium"] { width: 280px; }
.root[size^="medium"] { height: 36px; }
.input[size$="medium"] { padding: 0 10px; }
.input[size$="medium"][close] { padding-right: 30px; }

.root[size$="large"] { width: 440px; }
.root[size^="large"] { height: 38px; }
.input[size$="large"] { padding: 0 10px; }
.input[size$="large"][close] { padding-right: 30px; }

.root[size$="huge"] { width: 580px; }
.root[size^="huge"] { height: 40px; }
.input[size$="huge"] { padding: 0 10px; }
.input[size$="huge"][close] { padding-right: 30px; }

.root[size$="full"] { width: 100%; }
.input[size$="full"] { padding: 0 10px; }
.input[size$="full"][close] { padding-right: 30px; }
.root[size^="full"] { height: 100%; }

/* 错误信息相关样式 */
.message {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    margin-left: 10px;
    padding: 0 10px;
    line-height: 26px;
    font-size: 12px;
}

.message[color="error"] {
    display: block;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background-color: $brand-error;
    color: #fff;
}

.message[color="error"]:after {
    content: '';
    position: absolute;
    right: 100%;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 4px solid $brand-error;
    border-bottom: 4px solid transparent;
}

.icon[class] > span:before{
    font-size: 14px;
    margin-right: 0;
    color: #fff;
}
